<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组中方法测试</title>
</head>
<body>
  <!-- 使用forEach：当你不需要返回新数组，只需要遍历数组并对元素进行某些操作时（例如打印等）。
  使用map：当你需要基于原数组生成一个新数组，并且新数组的每个元素都是原数组元素经过某种变换后的结果时。原数组不改变, -->
  <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
  </ul>
    <script>
      listItemsArray = Array.from(document.querySelectorAll('li'));
      //listItemsArray = document.querySelectorAll('li');
console.log(listItemsArray); //Output: (3) [li, li, li]
    let arr=['a','b',1,3]
    let arr1=[{a:'1'}];
    //头部添加一个元素
    arr.unshift('start');
    //尾部添加一个元素
    arr.push('end');
    
    //map方法对数组中的元素进行操作
    arr1.forEach((item)=>{
          item.a =  2;
        })
        console.log('arr1',arr1);

        let map1=[1,2,3];
       let mapSum = 0;
      mapSum += map1.map(e=>e);
      console.log('mapSum',mapSum);
       
    //移除元素
    let romoveEl=arr.splice(0,2);
    //romoveEl.splice(1,1);
        console.log('移除',arr,romoveEl);

//         splice() 方法的第一个参数指定了开始修改数组的位置（索引）。
// 第二个参数指定了要删除的元素数量。如果设置为 0，则表示不删除任何元素，而只是添加或替换。
// 随后的参数（如果有的话）指定了要添加到数组中的新元素。
    //指定位置添加元素
    let arr2=['a','b',1,3];
    //0 代表不删除任何一个元素，要删除的话，就删除指定位置后面的元素！
    arr2.splice(2,0,'添加一个','添加两个元素')
    //arr.splice(2,0,'添加一个')
    console.log(arr2);
    console.log( 'index测试',arr2.indexOf(3));
    
    //pop 删除并返回最后一个元素  shift 删除并返回第一个元素
    let arr3=[1,2,3,4,5,6];
    let poparr=arr3.pop();
    console.log(arr3,poparr);
    let arr4=[1,2,3,4,5,6];
    let shiftarr=arr4.shift();
    console.log(arr4,shiftarr);
    
    //find 找到满足条件的数组中的第一个元素，否则返回 undefined
  let num= arr4.find((item)=>{
        return item>3;
    })
    console.log("find方法",num);
    
    //findIndex 找到满足条件的元素的索引
    let farr1=[1,3,4,5];
    let index=farr1.findIndex(item=>{
     return item===3;
    })
    
    console.log('满足的元素的索引为:',index);
    

    //filter 过滤数组中的元素
    let filterarr = arr4.filter((item)=>{
      item<4;
    })
    console.log('无return',filterarr);
    //slice浅拷贝
    brr = [0,1];
    let slicearr = brr.slice(0,1);
    console.log('slice浅拷贝',slicearr);
    
    //数组的排序处理,sort()方法处理
  let arrSort=[1,3,2,5,12,4,7,9,8];
//   function asort(a,b){
//     return a-b;
//   }

//   function asort(a,b){
//     return b-a;
//   }
   console.log("排序后的值为:",arrSort.sort((a,b)=> a-b));
    
  //遍历数组的 for of 用于输出数组中的值
  let farr=[1,2,3,4]
  for(let i of farr){
    console.log(i);
  }
  //遍历数组 for in 用于输出数组中的索引
  let iarr=[1,2,3,4]
  for(let i in iarr){
    console.log('索引为',i);
    console.log('数组的值为',iarr[i]);
    
  }

  let a= !["1","2","3","4","5"].includes("1");
  console.log("include方法测试",a);
  
   let ac=["a","b","c","d","e","f"];

   ac.forEach((item,index)=>{
    console.log(item,index);
    console.log( item[index]);
   })

   let ad={a:1,b:2};
  for( let key in ad){
   if(ad.hasOwnProperty(key)){
    console.log(ad[key]);
    
   }
  }

  let lists=[{a:1,b:2},{a:3,b:4}];
  console.log("lists的值为:",lists);
  
  //  let updatelists=lists.map((item)=>{
  //   item.c=item.a;
  //   item.d=item.b;
  //   return item;
  // })
  
   let txcodeList=[];
  lists.forEach((item =>{
     let txcode = item.a+'-'+item.b;
     txcodeList.push(txcode);
     item.c=3;
  }))
  console.log('txcodeList',txcodeList);
  console.log("list的值为",lists);
  console.log("updatelist的值为",updatelists);
  
  let arrobj=[
    {
      a:1,
      b:{a:1,b:2}
    },
    {
      c:1,
      d:{c:1,d:2}
    }
  ]

  console.log('测试数组对象',arrobj);
  
  let filarr=[1,2,5,3,67,34,23,87];
  let filarr1=filarr.filter(item=>item>3);
  console.log(filarr1,'11111111111111111');
  
  let ag="1";
 
  console.log(typeof Number(ag));
  



let c1=[1,2,3,4,5,6];
let c2=[6,5,4,3,2,1];

c1.map((item)=>{
  console.log('c1',item);
  c2.map((item2)=>{
    console.log('c2',item2);
    
  })
})

let arrList = [1,2,3,4,5];
// console.log(arrList.pop());
// console.log(arrList.shift());

// const res = arrList.map((a)=>{return "sdff"});
// console.log('res',res);

arrSort=[3,1,2,5,12,4,7,9,8];
console.log('sort', arrList.sort(()=> Math.random() - 0.5)); 
console.log("排序后的值为:",arrSort.sort((a,b)=> a-b));
console.log('arr',arrSort);

//join方法测试 
let arrjoin=[1,2,3];
let joina= arrjoin.join("");
let joinb= "a,b,c";
console.log('arrjoin', typeof joina);
console.log('arrjoin',  joinb);

const numbers = [1, 2, 3];
const shifted = numbers.shift();
console.log(shifted);
const unshifted = numbers.unshift(5); //unshift开头添加一个元素，并且返回新数组的长度
console.log(unshifted);
console.log(numbers);

let i=[{a:0,b:1}];
console.log('i的值',i[0]['a']);

let rev = [1,2,3];
 console.log('rev',rev.reverse());
  
 //反转一个字符
 const exampleSentence = "selur pmaCedoCeerf".split("").reverse().join("");
console.log(exampleSentence);

//数组方法测试 split方法用于将一个字符串按照特殊方式分割;join方法用于将数组中的元素按照特殊符号连接起来；
let str1 = "sdfdfS sdfd";
 console.log('str1',str1.toLowerCase().split(" ").join("-"));

let str2  = [1,2,3];
str1 = [2,3];
console.log('str2', JSON.stringify(str1)===JSON.stringify(str2));

let arry1 = [1, 1, 0];
let arry2 = [1, 1, 0];
console.log('eee',JSON.stringify(arry1)===JSON.stringify(arry2));

console.log('转换类型', typeof Number("12"));

//展开符测试
let ar1 = [1,3,3];
let ar2 = [2,3,4];
let ar3 = [...ar1,       ...ar2];
console.log('展开符测试',ar3,typeof ar3);

let test1 = [1,2,3].filter((item)=>{
 return item>1;
})
console.log('测试',test1);

let arrJoin = ['ltk','zs',111];
let arrJoinString = arrJoin.join('/');
console.log('arrJoinString',arrJoinString);

console.log('是否是数组',Array.isArray([1,2]));
console.log('arrJoin.length',arrJoin.length);

arrJoin.forEach((item,index)=>{
  console.log('item',item);
  console.log('index',index);
  
  
})

let testArr = [1,2,3];
let testArr1 = testArr.map((item)=> item.billId)

let arrTest1 = [].concat([1,2],[1,2]);
console.log('aaa', testArr,arrTest1);

//检查对象数组中是否有特定属性值
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const hasBob = users.some((item)=>item.name==='Bob')
console.log(hasBob); // true

    </script>
</body>
</html>